<script type="text/javascript" src="__PUBLIC__/js/jquery/lazyload.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery/jq.Masonry.js"></script>
                        	<div class="jqueryTitle mt5">
                            	<span>特别说明</span>
                            </div>
                            <div class="p15">
                            	用于瀑布流的图片一定要设置img的height高度，不然会由于浏览器加载速度太快masonry还无法获取高度来计算相关的值<br/>
                            	当需要排列图片div时需要调用<br/>
var $container = $('#container');<br/>
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 240
});
});<br/>
调用masonry插件的方法格式是：$('#container').masonry( 'methodName', [optionalParameters] )例如：<br/>
.masonry( 'appended', $content, isAnimatedFromBottom )//触发添加到container的项目的布局<br/>
.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素预初始化状态<br/>
.masonry( 'layout', $items, callback )// 指定项目的布局<br/>
.masonry( 'option', options ) //设置option<br/>
.masonry( 'reloadItems' ) //重新聚合所有项目以当前的顺序<br/>
.masonry( 'reload' ) //用于预先考虑或者插入项目 .masonry( 'reloadItems' )的简化版<br/>
.masonry( 'remove', $items ) //从masonry实例或dom中移除项目
                            </div>
                            
                        	<div class="jqueryTitle mt5">
                            	<span>相关参数</span>
                            </div>
                            <div class="p15">
                            	<table cellpadding="0" cellspacing="0" class="jqueryAttr">
                                	<thead>
                                    	<tr>
                                        	<th>参数名</th>
                                            <th>参数说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
		<tr>
        	<td>itemSelector</td>
            <td>class选择器,默认'.item'</td>
        </tr>
		<tr>
        	<td>columnWidth</td>
            <td>一列的宽度</td>
        </tr>        
        <tr>
        	<td>isAnimated</td>
            <td>使用jquery的布局变化,默认true</td>
        </tr>
		<tr>
        	<td>animationOptions</td>
            <td>animate属性渐变效果(Object { queue: false, duration: 500 })</td>
        </tr>
		<tr>
        	<td>gutterWidth</td>
            <td>列的间隙 Integer</td>
        </tr>        
        <tr>
        	<td>isFitWidth</td>
            <td>适应宽度Boolean</td>
        </tr>
		<tr>
        	<td>isResizableL</td>
            <td>是否可调整大小 Boolean</td>
        </tr>
		<tr>
        	<td>isRTL</td>
            <td>使用从右到左的布局 Boolean</td>
        </tr>                        
        </tbody>
                                </table>
                            </div> 
                            <div class="jqueryTitle mt5">
                            	<span>演示效果</span>
                            </div>
                            <div class="p15">
                            	<p class="pt15">前期准备：头部加入jquery-1.7.2.min.js;lazyload.js;jq.Masonry.js文件</p>
                            	<div class="pt15"><strong>效果</strong></div>
                                <p>CSS</p>
                                <pre>.lin_itemWrap{position:relative;}
.lin_itemPic{float:left; margin:10px; margin-bottom:0px;margin-right:0px;width:160px;border:1px solid #e0e0e0; background-color:#f0f0f0; padding:10px; zoom:1; overflow:hidden; display:inline;}
.lin_pic{overflow:hidden;width:160px;}
.lin_pic img{width:100%;}
#loading{text-align:center; display:none; color:#F00;}</pre>
             <div class="blank10"></div>
 			 <div class="lin_itemWrap" id="containerPic">
              	<div class="lin_itemPic">
              	   <div class="lin_pic"><img src="__PUBLIC__/images/jquery/1.jpg"  height="187"/></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="lin_pic"><img src="__PUBLIC__/images/jquery/2.jpg" height="378" /></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="lin_pic"><img src="__PUBLIC__/images/jquery/3.jpg" height="393"/></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="lin_pic"><img src="__PUBLIC__/images/jquery/4.jpg" height="276"/></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="pic"><img src="__PUBLIC__/images/jquery/5.jpg" height="435"/></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="lin_pic"><img src="__PUBLIC__/images/jquery/6.jpg" height="387"/></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="lin_pic"><img src="__PUBLIC__/images/jquery/7.jpg" height="387"/></div>
                </div> 
            </div>
            <div id="loading">loading</div>
                            	                             
                                
                            </div>  

                            <div class="clearfix pt40 pb40">
                            	<a href="http://url.cn/SPnXfO" title="《{$data.title}》源代码下载" class="jqueryDown" rel="nofollow" target="_blank">《{$data.title}》源代码下载</a>
                            </div>   
                        
 
 <script type="text/javascript">
 var imgUrl="__PUBLIC__/images/jquery/";
 <literal>$(function(){
	 		 	var $container = $('#containerPic'),sTimer,loadNum=0; 
    		$container.imagesLoaded(function(){
     			 $container.masonry({
        		 itemSelector: '.lin_itemPic',
        		 columnWidth: 200
      			});
    		});
			$(window).scroll(function scrollHandler(){
				clearTimeout(sTimer);
				sTimer = setTimeout(function() {
					if(window.loaded == 1||loadNum==1){$(window).unbind("scroll", scrollHandler);}
					var c=document.documentElement.clientHeight || document.body.clientHeight, t=$(document).scrollTop();
					if(t+c >= $container.offset().top+$container.height()){loadMore();}
				}, 100);
			});
			var jLoading = $('#loading');
			function loadMore() 
			{
				loadNum++;
				if(loadNum<=2)
				{
									var html="<div class='lin_itemPic'><div class='lin_pic'><img src='"+imgUrl+"1.jpg' height='187' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic'><img src='"+imgUrl+"2.jpg'  height='378' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic'><img src='"+imgUrl+"3.jpg'  height='393' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic'><img src='"+imgUrl+"4.jpg'  height='276' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic'><img src='"+imgUrl+"5.jpg'  height='435' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic'><img src='"+imgUrl+"6.jpg'  height='387' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic'><img src='"+imgUrl+"7.jpg'  height='387' /></div></div>";
				$container.append(html).masonry("reload");
				jLoading.hide();
				}

			}
	});</literal>
 </script>   
